<template>
  <div id="container" ref="container"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {
  CSS2DRenderer,
  CSS2DObject
} from "three/addons/renderers/CSS2DRenderer.js";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
import TWEEN from "@tweenjs/tween.js";
import Stats from "three/addons/libs/stats.module.js";
// 引入dat.gui.js的一个类GUI
import { GUI } from "three/addons/libs/lil-gui.module.min.js";

let container;
let scene;
let camera;
let renderer;
let controls;
let labelRenderer;
let raycaster;
let fbxLoader;
let stats; //帧率
let gui; //////////////////////////做到使用gui

export default {
  name: "HomeView",
  mounted() {
    this.init();
  },
  methods: {
    init() {
      container = this.$refs.container;

      console.log(container);

      //创建渲染器对象
      const width = container.clientWidth; //窗口宽度
      const height = container.clientHeight; //
      renderer = new THREE.WebGLRenderer({
        logarithmicDepthBuffer: true,
        antialias: true
      });

      renderer.shadowMap.enabled = true; // 开启阴影渲染
      renderer.shadowMap.type = THREE.PCFSoftShadowMap; //THREE.PCFSoftShadows;  // 设置阴影贴图的渲染方式
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xaaccff, 1); //设置背景颜色0xb9d3ff
      container.appendChild(renderer.domElement);

      labelRenderer = new CSS2DRenderer();
      labelRenderer.setSize(width, height);
      labelRenderer.domElement.style.position = "absolute";
      labelRenderer.domElement.style.top = "0px";
      container.appendChild(labelRenderer.domElement);

      //创建场景对象
      scene = new THREE.Scene();
      // scene.background = new THREE.Color(0x1fe31d);

      // 设置相机
      camera = new THREE.PerspectiveCamera(75, width / height, 1, 100000);
      camera.position.set(300, 300, 300); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      scene.add(camera);

      // 设置光源
      const ambient = new THREE.AmbientLight(0xffffff, 0.8); //环境光
      scene.add(ambient); //环境光添加到场景中

      // 创建平行光源并添加到场景中
      const directionalLight = new THREE.DirectionalLight(0xffffff, 2); // soft white light
      directionalLight.position.set(300, 500, 300); // 设置光源的位置
      directionalLight.castShadow = true; // 启用阴影投射
      directionalLight.shadow.camera.near = 1; // 阴影相机近剪切面
      directionalLight.shadow.camera.far = 10000; // 阴影相机远剪切面
      directionalLight.shadow.camera.left = -500; // 阴影相机左剪切面
      directionalLight.shadow.camera.right = 500; // 阴影相机右剪切面
      directionalLight.shadow.camera.top = 500; // 阴影相机上剪切面
      directionalLight.shadow.camera.bottom = -500; // 阴影相机下剪切面 就是影子在哪个范围里
      scene.add(directionalLight);

      //鼠标控制
      controls = new OrbitControls(camera, labelRenderer.domElement);

      //初始化射线相关
      raycaster = new THREE.Raycaster();

      // //坐标轴
      const axesHelper = new THREE.AxesHelper(100000);
      scene.add(axesHelper);

      //帧率
      if (process.env.NODE_ENV === "development") {
        stats = new Stats();
        // 设置监视器位置
        // stats.showPanel(2);//设置默认展示模式
        stats.domElement.style.position = "absolute";
        // stats.domElement.style.right = "10px";
        stats.domElement.style.top = "0px";
        stats.domElement.style.left = "10px";
        document.body.appendChild(stats.domElement);

        // 实例化一个gui对象
        gui = new GUI();
        //改变交互界面style属性
        gui.domElement.style.right = "0px";
        // gui.domElement.style.width = "300px";
        const hjgFolder = gui.addFolder("环境光");
        hjgFolder
          .add(ambient, "intensity", 0, 5)
          .name("强度")
          .step(0.1);
        hjgFolder.addColor(ambient, "color").name("颜色");
        const pxgFolder = gui.addFolder("平行光");
        pxgFolder
          .add(directionalLight, "intensity", 0, 5)
          .name("强度")
          .step(0.1);
        pxgFolder.addColor(directionalLight, "color").name("颜色");
      }
      this.animate();

      this.initWord();

      window.addEventListener("resize", this.onWindowResize);
    },
    animate() {
      if (stats) stats.update();
      TWEEN.update(); //动画库更新
      controls.update();
      renderer.render(scene, camera);
      labelRenderer.render(scene, camera);
      requestAnimationFrame(this.animate);
    },
    //屏幕尺寸变化
    onWindowResize() {
      const { clientWidth, clientHeight } = container;
      camera.aspect = clientWidth / clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(clientWidth, clientHeight);
      labelRenderer.setSize(clientWidth, clientHeight);
    },

    initWord() {
      const mesh = new THREE.Mesh(
        new THREE.BoxGeometry(100, 100, 100),
        new THREE.MeshLambertMaterial({ color: new THREE.Color("orange") })
      );
      mesh.translateY(50);
      mesh.castShadow = true;
      scene.add(mesh);

      const planeMesh = new THREE.Mesh(
        new THREE.PlaneGeometry(1000, 1000),
        new THREE.MeshPhongMaterial({ color: 0xffffff })
      );
      planeMesh.rotateX(-Math.PI / 2);
      planeMesh.receiveShadow = true;
      scene.add(planeMesh);
    }
  }
};
</script>


<style lang="scss" scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>
